<extend name="./Public/templete/base.html" />

<block name="title">
	<title>NoteManage</title>
</block>

<block name="link">
	<link rel="shortcut icon" src="../../../favicon.ico" />
	<link rel="stylesheet" type="text/css" href="../../../Public/source/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../../../Public/source/css/css3.css">
	<style type="text/css">
		.header {
			color: #ffffff;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
			height: 50px;
			margin-top: 10px;
			background-color: #393D49;
		}
	</style>
</block>

<block name="content">
	<div class="layui-body">
		<div class="form">
			<div class="header" style="position: relative;top:-20px;">
				<b>添加用户</b>
			</div>
			<div class="layui-form-item" id="alterinfo1">
				<label class="layui-form-label" for="num">学&emsp;号:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<input type="text" class="layui-input" id="num" size="20" style="height: 35px;border:1px solid lightgrey" placeholder="请输入学号"
					 onblur="check1()" />
					<span id="tip1" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="layui-form-item" id="alterinfo2">
				<label class="layui-form-label" for="addcontent">姓&emsp;名:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<input type="text" class="layui-input" id="name" size="20" style="height: 35px;border:1px solid lightgrey" placeholder="请输入姓名"
					 onblur="check2()" />
					<span id="tip2" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="layui-form-item" id="alterinfo3">
				<label class="layui-form-label" for="sex">性&emsp;别:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<select name="sex" id="sex" lay-verify="required" style="width: 300px;height: 35px;border:1px solid lightgrey" onblur="check3()">
						<option value="">请选择性别</option>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
					<span id="tip3" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="layui-form-item" id="alterinfo4">
				<label class="layui-form-label" for="class">班&emsp;级:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<input type="text" class="layui-input" id="class" size="35" style="height: 35px;border:1px solid lightgrey" placeholder="请输入班级"
					 onblur="check4()" />
					<span id="tip4" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="layui-form-item" id="alterinfo5">
				<label class="layui-form-label" for="school">学&emsp;院:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<input type="text" class="layui-input" id="school" size="35" style="height: 35px;border:1px solid lightgrey" placeholder="请输入学院"
					 onblur="check5()" />
					<span id="tip5" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="layui-form-item" id="alterinfo6">
				<label class="layui-form-label" for="group">组&emsp;别:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<select name="group" id="group" lay-verify="required" style="width: 300px;height: 35px;border:1px solid lightgrey" onblur="check6()">
						<<option value="">请选择组别</option>
							<option value="前端">前端</option>
							<option value="后台">后台</option>
					</select>
					<span id="tip6" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="layui-form-item" id="alterinfo7">
				<label class="layui-form-label" for="status">权&emsp;限:</label>
				<div class="layui-input-inline" style="display: inline-block;">
					<select name="status" id="status" lay-verify="required" style="width: 300px;height: 35px;border:1px solid lightgrey" onblur="check7()">
						<option value="">请选择权限</option>
						<option value="1">本科生</option>
						<option value="2">组长</option>
						<option value="3">研究生</option>
					</select>
					<span id="tip7" style="color: #18BC9C; font-size: small;">*</span>
				</div>
			</div>

			<div class="form-but">
				<div class="layui-btn-group" id="button-group" style="position: relative;left: -370px;top:-80px;">
					<button id="add" class="layui-btn">添加</button>
					<button id="clear" class="layui-btn" onclick="Clear()">重置</button>
				</div>
			</div>
		</div>
	</div>
</block>

<block name="js">
	<script src="../../../Public/source/layui/layui.js" type="text/javascript"></script>
	<script>
		//JavaScript代码区域
		layui.use('element', function () {
			var element = layui.element;
		});
	</script>

	<script>
		function check1() {
			var u = document.getElementById("num");
			var t = document.getElementById("tip1");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 学号不能为空";
			}
		}

		function check2() {
			var u = document.getElementById("name");
			var t = document.getElementById("tip2");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 姓名不能为空";
			}
		}

		function check3() {
			var u = document.getElementById("sex");
			var t = document.getElementById("tip3");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 性别不能为空";
			}
		}

		function check4() {
			var u = document.getElementById("class");
			var t = document.getElementById("tip4");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 班级不能为空";
			}
		}

		function check5() {
			var u = document.getElementById("school");
			var t = document.getElementById("tip5");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 学院不能为空";
			}
		}

		function check6() {
			var u = document.getElementById("group");
			var t = document.getElementById("tip6");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 组别不能为空";
			}
		}

		function check7() {
			var u = document.getElementById("status");
			var t = document.getElementById("tip7");
			var reg = /^[a-zA-Z]$/;
			if (u == null || u.value.length == 0) {
				t.innerHTML = " 权限不能为空";
			}
		}

		function Clear() {
			console.log("ok");
			var a = document.getElementById("num");
			var b = document.getElementById("name");
			var c = document.getElementById("sex");
			var d = document.getElementById("class");
			var e = document.getElementById("school");
			var f = document.getElementById("group");
			var g = document.getElementById("status");
			a.value = '';
			b.value = '';
			c.value = '';
			d.value = '';
			e.value = '';
			f.value = '';
			g.value = '';
		}
	</script>

	<script type="text/javascript" src="../../../Public/source/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('#add').click(function () {
				var a = document.getElementById("num");
				var b = document.getElementById("name");
				var c = document.getElementById("sex");
				var d = document.getElementById("class");
				var e = document.getElementById("school");
				var f = document.getElementById("group");
				var g = document.getElementById("status");
				if (a.value.length == 0 || b.value.length == 0 || c.value.length == 0 || d.value.length == 0 || e.value.length == 0 || f.value.length == 0 || g.value.length == 0) {
					alert("请检查信息是否填写完整!");
					return false;
				}
				else {
					var num = $('#num').val();
					var name = $('#name').val();
					var sex = $('#sex').val();
					var banji = $('#class').val();
					var school = $('#school').val();
					var group = $('#group').val();
					var status = $('#status').val();
					$.ajax({
						type: "post",
						url: "{:U('User/addUser')}",//后台提供接口
						data: {
							num: num,
							name: name,
							sex: sex,
							class: banji,
							school: school,
							group: group,
							status: status
						},
						dataType: "json",
						success: function (data) {
							if (data.status != 1) {
								alert(data.info);
								window.location.reload();
							}
							else {
								alert("添加成功");
								window.location.reload();
							}
						},
						error: function () {
							console.log("error");
						}
					});
					return true;
				}

			});
		});

	</script>
</block>